<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript">
    </script>
    <script src="./lib/moment.js"></script>
    <script src="./lib/axios.js"></script>
</head>
<style>
    .sop {
        width: 100px;
    }

    .bori {
        border: 1px red solid;
    }

    .bigger {
        width: 800px;
        height: 100%;
        padding-right: 11px;
    }

    .smor {
        width: 100%;
        height: 50px;
        margin: 5px;
        border: 1px rgb(112, 198, 255) solid;


    }

    .leispan {
        margin-left: 40px;
    }
</style>

<body>
    <div id="app">
        <div>
            <h2>成为京东会员的日期：{{ date }}</h2>
            <input type="text" v-model="date" />
            <h2>格式化后的日期 {{ formatDate }}</h2>
            <h2>您已经京东会员{{ vipDays }}天</h2>
        </div>

        <!-- <p>{{ selecTojis }}</p> -->
        <div>
            <input type="text" v-model.number="lets" class="sop">
            <select v-model="selecTojis">
                <option disabled value="">请选择</option>
                <option>+</option>
                <option>-</option>
                <option>×</option>
                <option>÷</option>
            </select>
            <input type="text" v-model.number="rights" class="sop">
            <button @click="jisuan()">=</button>
            <input type="text" :value="soe" class="sop">
            <!-- <input type="text" v-if="selecTojis"> -->
        </div>
        <br>
        <!-- <p>{{szio}}</p> -->
        <div class="bori bigger">
            <p>
                <input type="text" placeholder="计算属性筛选" v-model="serch">
                <span class="leispan">增加水果：
                    <input type="text" v-model="uioFis">
                    <button @click="addFal">确定</button>
                </span>
            </p>
            <p class="smor" v-for="(ite , index) of fruitsArr" :key="'fui'+index">
                <span>{{ ite.uid + 1 }}</span>
                <span>{{ ite.name}}</span>
                <span class="leispan">{{ ite.time  }}</span>
                <span class="leispan" @click="datLi(ite.uid)">删除</span>
            </p>
            <h1 v-show="fruitsArr.length == 0">啥也木有呀~</h1>
        </div>
        <button @click="axiosLLO">点击获取一张猫图</button>
        <button @click="tachSell">点击保存</button>
        <!-- <img src="" alt=""> -->
    </div>
</body>
<!-- <script src="./cat.js"></script> -->
<script>
    // import    from "@/cats.js"
    // import axios from './lib/axios';
    // import {
    //     getForCatPrcChats
    // } from './cat.js';
    // console.log('getForCatPrcChats', getForCatPrcChats)
    // 定义全局过滤器
    Vue.filter('timeporcess', function (value) {
        // 将时间戳转为具体的日期
        return moment(value).format('YYYY-MM-DD hh:mm:ss a')
    })
    const app = new Vue({
        el: '#app', //挂载到vue实例上
        data: { //挂载到vue实例上，会引起视图变化的数据
            date: '2019-8-8',
            lets: '',
            rights: '',
            soe: '',
            selecTojis: '',
            szio: [{
                name: '西瓜',
                time: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss a')
            }, {
                name: '苹果',
                time: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss a')
            }, {
                name: '草莓',
                time: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss a')
            }, {
                name: '^-^',
                time: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss a')
            }],
            serch: '',
            uioFis: '',
            papc: [],
            tao: ''
        },
        methods: { //操作函数
            jisuan() {
                if (this.selecTojis == '+') {
                    this.soe = this.lets + this.rights
                } else if (this.selecTojis == '-') {
                    this.soe = this.lets - this.rights
                } else if (this.selecTojis == '×') {
                    this.soe = this.lets * this.rights
                } else if (this.selecTojis == '÷') {
                    this.soe = this.lets / this.rights
                }
            },
            addFal() {
                if (this.uioFis != '') {
                    this.szio.push({
                        name: this.uioFis,
                        time: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss a')
                    })
                }
                this.uioFis = ''

            },
            datLi(ind) {

                console.log('first', this.szio[ind])
                this.szio.splice(ind, 1)
                // this.szio.splice(this.szio[ind], 1)
            },
            axiosLLO() {
                // let axiosCatApi = 'https://api.thecatapi.com/v1/images/'
                // const axiosCat = axios.create({
                //     // 默认地址/基准地址
                //     baseURL: axiosCatApi,
                //     // 设置请求的间隔时长
                //     timeout: 5000
                // })

                // function getForCatPrcChats(params = {
                //     limit: 1
                // }) {
                //     return axiosCat({
                //         url: "search",
                //         method: 'get',
                //         params
                //     })
                // }


                // let theCats = async () => {
                //     let res = await getForCatPrcChats()
                //     // console.log("测试中", res.data[0].url)
                //     this.papc.push(res.data[0].url)
                // }
                // theCats()
                // console.log("测试中", this.papc)

                const myuio = axios({
                    method: 'GET',
                    url: 'https://dog.ceo/api/breeds/image/random',
                }).then(res => console.log(res))
                // const checkli = axios.create({})
                // const myget = (url, param = {}, headers = {}) => {
                //     return checkli.get(url, {
                //         params: param,
                //         headers
                //     })
                // }
                // const getShop = (data) => checkli.get(data)
                // getShop({
                //     url: 'http://www.liulongbin.top:3006/api/getbooks',
                //     param: [id=1],
                //     headers: {}
                // }).then(res => console.log(res))
            },
            tachSell() {
                // 要保存的字符串, 需要先将数据转成字符串
                const stringData = JSON.stringify([{
                    name: "张三",
                    age: 18
                }], null, 2)
                // dada 表示要转换的字符串数据，type 表示要转换的数据格式
                const blob = new Blob([stringData], {
                    type: 'application/json'
                })
                // 根据 blob生成 url链接
                const objectURL = URL.createObjectURL(blob)

                // 创建一个 a 标签Tag
                const aTag = document.createElement('a')
                // 设置文件的下载地址
                aTag.href = objectURL
                // 设置保存后的文件名称
                aTag.download = "json文件.json"
                // 给 a 标签添加点击事件
                aTag.click()
                // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
                // 当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
                URL.revokeObjectURL(objectURL)
            }

        },
        computed: { //计算属性
            formatDate() {
                return moment(this.date).format('YYYY-MM-DD HH:mm:ss a')
            },
            vipDays() {
                console.log('重新计算')
                return Math.ceil((Date.now() - new Date(this.date.replace(/\-/g, '/')).getTime()) / (24 * 60 *
                    60 * 1000))
            },
            fruitsArr() {
                let tusArr = []
                // tusArr.map(this.szio)
                for (let index = 0; index < this.szio.length; index++) {
                    // const element = this.szio[index]; 
                    if (this.szio[index].name.indexOf(this.serch) > -1) {
                        tusArr.push(this.szio[index])
                        this.szio[index].uid = index
                    }

                }
                return tusArr
            }
        },
        // beforeUpdate:{
        //     function (){
        //         console.log('first', first)
        //     }
        // }
        beforeUpdate() {
            console.log("****beforeUpdate()执行阶段*****")
            console.log("n的值为", this.n)
        },
        updated() {
            console.log("****updated()执行阶段*****")
            console.log("n的值为", this.n)
            // debugger
        }
        // FrisDate() {
        //         return moment(this.date).format('YYYY-MM-DD HH:mm:ss a')
        //     },

    });
</script>

</html>